<template>
	<view class="user">
		<page-header></page-header>
		<view v-show="isLogin" class="login-box">
			<view class="header">
				<view class="userinfo">
					<image class="avatar" :src="userinfo.headimgurl"></image>
					<view class="user-desc">
						<text class="nickname">{{userinfo.nick_name}}</text>
						<image class="qr-code" src='/static/img/mine/qr-code.png' @tap='toogleQr'></image>
					</view>
					<view class="more" @tap="goUserinfo">
						<text>更多</text>
						<image class="to-right" src="../../../static/img/mine/to-right.png"></image>
					</view>
				</view>
				<image class="banner" src="/static/img/mine/banner.png" @tap="bannerSkip"></image>
			</view>
			<view class="list">
				<view class="item" v-for='(item, index) in list' :key='index' @tap="$open(item.url)">
					<image class="icon" :src="item.icon"></image>
					<text class="title">{{item.title}}</text>
					<image class="to-right" src="../../../static/img/mine/to-right.png"></image>
				</view>
			</view>
			<!-- 二维码模态框 -->
			<view :class="['qr-code-mask', {'ac': qrShow}]" @tap="toogleQr">
				<view class="qr-code" @tap.stop='qrSkip'>
					<image class="qrcode-img" :src="qrcode"></image>
					<text v-show="!userinfo.store_id" class="title">{{qrTitle}}</text>
					<text :class="['info', {'ac': !userinfo.is_member}, {'top': userinfo.store_id}]" @tap.stop='isVip'>{{qrInfo}}</text>
					<image class="close" src="/static/img/common/close.png" @tap.stop="toogleQr"></image>
				</view>
			</view>
			<!-- 会员等级模态框 -->
			<view :class="['vip-mask', {'ac': vipShow}]" @tap="toogleVip">
				<view class="vip" @tap.stop='lookVipStatu'>
					<image class="avatar" src="/static/img/mine/vip.png"></image>
					<view class="desc">
						<text class="title">会员标识</text>
						<text class="info">{{storeInfo}}</text>
					</view>
				</view>
			</view>
		</view>
		<view v-show="!isLogin" class="no-login">
			<view class="btn" @tap="$open('/pages/common/login/login')">登录</view>
		</view>
	</view>
</template>

<script>
	import PageHeader from '@/components/page-header/page-header'
	import storage from '@/commen/utils/storage'
	import {
		getUserInfo,
		myStore,
		getQrCode
	} from '@/commen/js/config'

	export default {
		data() {
			return {
				list: [{
					icon: '/static/img/mine/user-icon-1.png',
					title: '我的积分',
					url: '/pages/mine/my-integral/my-integral'
				}, {
					icon: '/static/img/mine/user-icon-2.png',
					title: '我的点赞',
					url: '/pages/mine/my-praise/my-praise'
				}, {
					icon: '/static/img/mine/user-icon-3.png',
					title: '服务记录',
					url: '/pages/mine/service-log/service-log'
				}, {
					icon: '/static/img/mine/user-icon-4.png',
					title: '意见反馈',
					url: '/pages/mine/feedback/feedback'
				}, {
					icon: '/static/img/mine/user-icon-5.png',
					title: '关于我们',
					url: '/pages/mine/about-us/about-us'
				}], // 功能列表
				userinfo: {}, // 用户信息
				isLogin: false, // 是否登录
				qrShow: false, // 展示二维码
				vipShow: false, // 展示会员等级
				storeInfo: '未绑定门店，快去到门店挑选衣服吧>', // 是否绑定店铺对应的信息
				qrTitle: '开通会员获取优惠', // 二维码标题
				qrInfo: '立即开通>>', // 二维码信息
				token: '', // 暂存token
				qrcode: '', // 二维码
			}
		},
		components: {
			PageHeader
		},
		onPullDownRefresh() {
			this.userIsLogin()
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 800)
		},
		onLoad() {
			this.userIsLogin()
			this.listenerEvent()	
		},
		methods: {
			// 判断是否登录
			userIsLogin() {
				this.token = storage.get('token')
				this.isLogin = this.token ? true : false
				if (this.isLogin) {
					this.getUserInfo()
					this.getQrCode()
				}
			},
			// 获取二维码
			async getQrCode() {
				const params = {
					token: this.token
				}
				const [err, res] = await getQrCode(params)
				if (res) {
					this.qrcode = res.qr_code
				}
			},
			// 获取个人资料
			async getUserInfo() {
				const params = {
					token: this.token
				}
				const [err, res] = await getUserInfo(params)
				if (res && res.info) {
					this.userinfo = res.info
					this.getVipInfo()
					storage.set('userinfo', res.info)
					// console.log("现在的信息状态为："+this.userinfo)
				}
			},
			// 获取所属门店
			async getStore() {
				const params = {
					token: this.token
				}
				const [err, res] = await myStore(params)
				if (res) {
					return res.info.address
				}
				return false
			},
			// 获取vip信息
			async getVipInfo() {
				if (this.userinfo.is_member) {
					if (this.userinfo.store_id) { // 有绑定店铺
						const storeInfo = await this.getStore()
						if (storeInfo) {
							this.storeInfo = storeInfo
							this.qrInfo = storeInfo
						} else {
							this.storeInfo = '未知店铺'
							this.qrInfo = '未知店铺'
						}
					} else { // 无绑定店铺
						this.storeInfo = '未绑定门店，快去到门店挑选衣服吧>'
						this.qrTitle = '未绑定门店，请出示该码绑定门店'
						this.qrInfo = '第一次消费自动绑定'
					}
				}
			},
			// banner的跳转
			bannerSkip() {
				// console.log("现在的会员状态为："+this.userinfo.is_member)
				if (this.userinfo.is_member) {
					this.toogleVip()
				} else { // 购买vip
					this.$open('/pages/mine/buy-vip/buy-vip')
				}
			},
			// qr跳转
			qrSkip() {
				if (this.userinfo.is_member) {
					this.$open('/pages/mine/vip-right/vip-right')
				}
			},
			// 是否为vip
			isVip() {
				if (!this.userinfo.is_member) { // 购买vip
					this.$open('/pages/mine/buy-vip/buy-vip')
				}
			},
			// 查看会员状态详情
			lookVipStatu() {
				this.$open('/pages/mine/vip-right/vip-right')
				this.toogleVip()
			},
			// 展示/关闭二维码展示
			toogleQr() {
				this.qrShow = !this.qrShow
			},
			// 展示/关闭会员等级
			toogleVip() {
				this.vipShow = !this.vipShow
			},
			// 前往个人资料
			goUserinfo() {
				this.$open('/pages/mine/personal-data/personal-data')
			},
			qrR(res) {
				this.src = res
			},
			// 监听事件
			listenerEvent() {
				// 刷新app
				uni.$on('refreshIndex', () => {
					this.userIsLogin()
				})
				// 刷新用户信息
				uni.$on('refreshUserInfo', () => {
					this.userIsLogin()
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/static/scss/config.scss';
	@import '@/static/scss/mixin.scss';

	.user {
		@include box-w(100%);

		.header {
			position: relative;
			margin-top: 262rpx;
			@include box-bg(100%, 300rpx, '');

			.userinfo {
				@include square(100%);
				@include flex-row(center, flex-start);
				padding-top: 44rpx;

				.avatar {
					@include circle(132rpx);
				}

				.user-desc {
					@include box-w(300rpx);
					@include flex-col(center, flex-start);
					margin-left: 44rpx;

					.nickname {
						width: 350rpx;
						@include font-set($font-a, $color-c);
						@include font-one();
					}

					.qr-code {
						@include square(48rpx);
						margin-top: 30rpx;
					}
				}

				.more {
					position: relative;
					@include font-set($font-b, $color-f);
					line-height: 132rpx;
					padding-left: 76rpx;
					padding-right: 50rpx;
					
					.to-right{
						@include right(22rpx);
						@include box(16rpx, 28rpx);
					}
				}
			}

			.banner {
				@include box(624rpx, 216rpx);
				@include bottom(-124rpx);
			}
		}

		.list {
			position: relative;
			@include box-w(100%);
			padding: 0 32rpx;
			margin-top: 160rpx;

			.item {
				position: relative;
				padding: 28rpx 0 10rpx 10rpx;
				border-bottom: 2rpx solid $bg-d;
				@include flex-row(flex-start);

				.icon {
					@include square(52rpx);
				}

				.title {
					@include font-set($font-b, $color-c);
					margin-left: 20rpx;
				}
				
				.to-right{
					@include right-top(0, 44rpx);
					@include box(16rpx, 28rpx);
				}
			}
		}

		.qr-code-mask {
			@include mask();
			@include flex-row();
			transition: all .5s;
			top: -100%;

			&.ac {
				@include mask();
			}

			.qr-code {
				position: relative;
				@include box(584rpx, 536rpx, $bg-c);
				@include flex-col();
				padding-top: 60rpx;
				box-shadow: 0 30rpx 62rpx rgba(0, 0, 0, 0.16);

				.qrcode-img {
					@include square(300rpx);

					canvas {
						@include square(100%);
					}
				}

				.title {
					@include font-set($font-b, $color-h);
					margin-top: 30rpx;
				}

				.info {
					&.ac {
						@include font-set($font-d, $color-i, bold);
					}

					&.top {
						@include font-hide();
						@include box-w();
						margin-top: 40rpx;
						padding:0 40rpx;
						text-align: center;
					}

					@include font-set($font-d, $color-c, 500);
					margin-top: 10rpx;
				}

				.close {
					@include right-top(22rpx, 22rpx);
					@include square(44rpx);
				}
			}
		}

		.vip-mask {
			@include mask();
			top: -100%;
			transition: all .5s;
			@include flex-row();

			&.ac {
				@include mask();
			}

			.vip {
				@include box(588rpx, 152rpx, $bg-c);
				@include flex-row();
				box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.1);
				padding: 0 40rpx;

				.avatar {
					@include box(82rpx, 68rpx);
				}

				.desc {
					width: 397rpx;
					margin-left: 30rpx;

					.title {
						@include font-set($font-b, $color-c, 500);
					}

					.info {
						margin-top: 16rpx;
						@include font-set($font-c, $color-g);
						@include font-one();
					}
				}
			}
		}

		.btn {
			@include box(150rpx, 70rpx, $bg-a);
			@include flex-row();
			@include font-set($font-a, $color-a);
			margin: 320rpx auto 0;
			border-radius: 16rpx;
			letter-spacing: 8rpx;
		}
	}
</style>
